$(function () {
    $(".conlist .list1 li").on("click", function () {
        $(this).children("a").children("span").addClass("current");
        $(this).siblings().children("a").children("span").removeClass("current");
        $(".tabcon>div").eq($(this).index()).show().siblings().hide();
    })
})

$(function () {
    $(document).on("scroll", _.debounce(function () {
        if ($(".conlist").offset().top - $("header").height() < $(document).scrollTop()) {
            $(".conlist").css({ 
                position: "fixed", 
                top: $("header").height(), 
                left: "50%", 
                transform: "translate(-50%,0)"
             });
            $(".tabcon").css({
                 mardinTop: $(".conlist").height() 
            })
        }
        else {
            $(".conlist").css({ 
                position: "static", 
                top: 0, "left": 0, 
                transform: "translate(0,0)" 
            });
            $(".tabcon").css({ marginTop: 0 })
        }
    }, 300))
})






//放大镜
$(function () {
    $(".smallimg").on("mouseenter", function () {
        $(this).children().show();
        $(".bigarea").show();
        $(".smallarea").css({
            width: $(".smallimg").width() / $(".bigimg").width() * $(".bigarea").width(),
            height: $(".smallimg").height() / $(".bigimg").height() * $(".bigarea").height()
        })

        $(this).on("mousemove", function (e) {
            let mx = e.pageX - $(this).offset().left - $(".smallarea").width() / 2;
            let my = e.pageY - $(this).offset().top - $(".smallarea").height() / 2;
            if (mx < 0) {
                mx = 0;
            }
            if (my < 0) {
                my = 0;
            }
            if (mx > $(".smallimg").width() - $(".smallarea").width()) {
                mx = $(".smallimg").width() - $(".smallarea").width();
            }
            if (my > $(".smallimg").height() - $(".smallarea").height()) {
                my = $(".smallimg").height() - $(".smallarea").height();
            }
            $(".smallarea").css({
                left: mx,
                top: my
            })
            let bl = $(".bigarea").width() / $(".smallarea").width();
            // console.log(bl);
            $(".bigimg").css({
                left: bl * mx * -1,
                top: bl * my * -1
            })
        })
    }).on("mouseleave", function () {
        $(".smallarea").hide();
        $(".bigarea").hide()
    })

    //点击换图
    $(".sarea li").on("click", function () {
        // let strsrc = $(this).children("img").attr("src");
        var tempindex = $(this).index();
        console.log(tempindex);
        $(".smallimg").css({
            backgroundImage: `url(./img/glass${tempindex}.jpg)`,
        })
        $(".bigimg").attr("src", `./img/glass${tempindex}.jpg`)
    })
})